<!-- 商家分布模块（地图+散点图） -->
<template>
	<div id="com-container" @dblclick="revertMap">
		<!-- 双击点击事件   回到原地图 -->
		<div class="com-chart" ref="map_ref">

		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	//导入把中文转换成拼音的方法getProvinceMapInfo
	import {
		getProvinceMapInfo
	} from '../utils/map_utils.js'
	export default {
		data() {
			return {
				chartInstance: null,
				allData: null, //服务器返回的数据
				mapData: {} //获取省份矢量数据缓存

			}

		},
		mounted() {
			this.initChart()
			this.getData()
			//屏幕监听事件
			window.addEventListener('resize', this.screenAdapter)
			//在页面加载完成的时候 主动进行屏幕的适配
			this.screenAdapter()

		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
		},
		methods: {
			//初始化echarInstance对象
			async initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.map_ref, 'chalk') //第二个参数主题的使用
				// http://localhost:8080/static/map/china.json
				//由于我们现在获取的数据并不在koa的后台  所以我们不能使用  htis.$http.get()来获取  我们可以使用axios来获取
				const ret = await axios.get('http://localhost:8080/static/map/china.json')
				//对地图进行注册
				this.$echarts.registerMap('china', ret.data)
				this.allData = ret
				//对图表初始化配置的控制
				const initOption = {
					title: { //标题
						text: '▎商家分布',
						left: 20,
						top: 20
					},
					geo: { //对地图的配置
						type: 'map',
						map: 'china',
						top: '5%',
						botom: '5%',
						itemStyle: { //每个省的颜色
							areaColor: '#2E72BF',
							borderColor: '#333'

						}
					},
					legend: { //图例文字的配置
						left: '5%',
						bottom: '5%',
						orient: 'vertical' //设置文字的方向 从上往下
					}
				}
				//可以多次设置setOption  它是相互整合的过程  不会覆盖之前的设置
				this.chartInstance.setOption(initOption)
				this.chartInstance.on('click', async arg => {
					//arg.name得到所点击的省份，这个省的是中文 我们需要转换成英文 英文在public-stati-province里面都是英文命名 我们可以使用utils文件夹下面工具进行转换

					const provinceInfo = getProvinceMapInfo(arg
						.name) //得到拼音的省份和数据路径"shanxi1", path: "/static/map/province/shanxi1.json"
					//获取这个省份的地图矢量数据
					//判断当前所点击的这个省份的地图数据是否在mapData缓存中
					if (!this.mapData[provinceInfo.key]) {
						const ret = await axios.get('http://localhost:8080' + provinceInfo.path)
						this.mapData[provinceInfo.key] = ret.data
						this.$echarts.registerMap(provinceInfo.key, ret
							.data) //第一个参数获取拼音，第二个参数获取数据  进行地图注册 当我们点击那个省份就单独显示那个省份的地图
					}

					const changeOption = {
						geo: {
							map: provinceInfo.key
						},

					}
					this.chartInstance.setOption(changeOption)
				})


			},
			// 获取目录public-staic-map-china.json的数据
			async getData() {
				//获取服务器的数据  散点图数据
				const {
					data: ret
				} = await this.$http.get('map')
				this.allData = ret
				this.updateChart()

			},
			//更新图表
			updateChart() {
				//处理图表需要的数据
				//图例数据
				const legendArr = this.allData.map(item => {
					return item.name
				})
				const seriesArr = this.allData.map(item => {
					return { //返回这个对象就代表一个类别下的所有散点图的数据 如果想在地图中使用散点图的数据 ，我们需要给散点图的图表增加一个配置 coordinateSystem:geo
						type: 'effectScatter',
						name: item.name,
						data: item.children,
						coordinateSystem: 'geo',
						rippleEffect: { //散点图的大小
							scale: 6,
							brushType: 'stroke'
						}


					}
				})
				const dataOption = { //因为前面都配置过 这里只对数据行配置 
					legend: { //显示图例文字
						data: legendArr
					},
					series: seriesArr

				}
				this.chartInstance.setOption(dataOption)

			},
			screenAdapter() { //屏幕适配  当浏览器发生变化时 图表也随之改变
				const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
				const adapterOption = { //屏幕适配相关的一些配置
					title: { //控制标题的大小
						textStyle: {
							fontSize: titleFontSize
						}
					},
					legend: { //控制图例的大小
						itemWidth: titleFontSize / 2,
						itemHeight: titleFontSize / 2,
						itemGap: titleFontSize / 2,
						textStyle: {
							fontSize: titleFontSize / 2
						}
					}
				}
				this.chartInstance.setOption(adapterOption)

				//手动调用图表对象的resize  才能产生效果
				this.chartInstance.resize()
			},
			revertMap() { //回到中国地图
				const reverOption = {
					geo: {
						map: 'china'
					}
				}
				this.chartInstance.setOption(reverOption)

			}

		}
	}
</script>

<style scoped="scoped">
</style>
